<template>
	<uni-popup ref="dialog" :type="type" :mask-click="mask" :is-mask-click="mask" @maskClick="handleMask">
		<view :class="className" :style="{ marginTop: `${offset}rpx` }">
			<slot name="header"></slot>
			<view class="title" v-if="title">
				<template v-if="current > 0">
					<m-icon type="icon-fanhui" @click="current = 0"></m-icon>
				</template>
				<view v-if="title">{{ title }}</view>
			</view>
			<template v-if="!isPayType">
				<view class="body">
					<slot></slot>
				</view>
				<!-- 开启支付方式选择时 -->
				<template v-if="isPayType">
					<m-cell class="cell" title="支付方式" border="0" :rightText="payType[paytype]"
						@click="current = 1"></m-cell>
				</template>
				<view class="pay-Box " v-if="isPwdShow">
					<template v-if="Number(userinfo.payPassword)">
						<view class="form-Item"><input type="password" v-model="pwd" placeholder="请输入支付密码" /></view>
					</template>
					<template v-else>
						<view class="pay-error "
							@click="Jump('/pages/mine/setAccount/security/editorPay/editorPay?type=1')">
							<text>未设置安全密码</text>
						</view>
					</template>
					<template v-if="isPwdShow&&Number(userinfo.payPassword)">
						<view class="fs24 mt-36 flex jc-center" @click="Jump(`/pages/mine/setAccount/security/editorPay/editorPay?type=2`)">
							<text>忘记支付密码?</text>
							<text class="ml-12 text-red" @click="">立即找回</text>
						</view>
					</template>
				</view>
				<view class="footer">
					<view class="cancel" type="falls" v-if="showCancel" @click="handleCancel">{{ cancelText }}</view>
					<view class="confirm" v-if="showConfirm" :loading="loading" @click="handleConfirm">
						{{ confirmText1 || confirmText }}
					</view>
				</view>
			</template>
			<template v-else>
				<swiper class="swiper" :style="style" :current="current" :disable-touch="true" duration="100">
					<swiper-item>
						<template>
							<view class="body">
								<slot></slot>
							</view>
							<m-cell class="cell" title="支付方式" border="0" :rightText="payType[paytype]"
								@click="current = 1"></m-cell>
							<view class="pay-Box " v-if="isPwdShow">
								<template v-if="Number(userinfo.payPassword)">
									<view class="form-Item"><input type="password" v-model="pwd"
											placeholder="请输入支付密码" /></view>
								</template>
								<template v-else>
									<view class="pay-error "
										@click="Jump('/pages/mine/setAccount/security/editorPay/editorPay?type=1')">
										<text>未设置安全密码</text>
										<!-- <m-button size="small">前往设置</m-button> -->
									</view>
								</template>
							
							</view>
							<view class="footer">
								<view class="cancel" type="falls" v-if="showCancel" @click="handleCancel">
									{{ cancelText }}
								</view>
								<view class="confirm" v-if="showConfirm" :loading="loading" @click="handleConfirm">
									{{ confirmText1 || confirmText }}
								</view>
							</view>
						</template>
					</swiper-item>
					<swiper-item>
						<template>
							<view class="pay-list-box">
								<payType class="pay-list" v-model="paytype"></payType>
							</view>
						</template>
					</swiper-item>
				</swiper>
			</template>
		</view>
	</uni-popup>
</template>

<script>
	import props from './props.js';
	import { mapState } from 'vuex';
	import { fingerprint } from '@/utils/tools.js';
	import md5 from 'js-md5';
	export default {
		name: 'm-pay',
		mixins: [props],
		data() {
			return {
				paytype: '3',
				current: 0,
				pwd: '',
				isPwdShow: false
			};
		},
		computed: {
			className() {
				return [this.bgType, this.type == 'dialog' ? 'pay-box' : 'pay-bottom-box'];
			},
			style() {
				let style = {};
				if (this.height) {
					style.height = `${this.height}rpx`;
				}
				return style;
			},
			...mapState({
				isFinger: state => state.setting.isFinger,
				userinfo: state => state.user.userinfo,
				payType: state => state.general.payType
			}),
			confirmText1() {
				if (this.userinfo.payPassword == '0') {
					return "前往设置";
				} else {
					return '确定';
				}
			}
		},
		watch: {
			isShow(val) {
				if (val) {
					//如果有指纹默认不打开密码框
					this.isPwdShow = this.forcePayShow || !this.isFinger;
					this.open();
				} else {
					setTimeout(() => {
						this.pwd = '';
					}, 100);
					this.close();
				}
			},
			//支付方式有变化里面切换会一屏
			paytype(val) {
				this.$emit('input', val);
				this.current = 0;
			},

		},
		mounted() {

		},
		methods: {
			open() {
				this.$refs.dialog.open();
			},
			close() {
				this.$refs.dialog.close();
			},
			handleItem(item, index) {
				this.current = index;
			},
			async handleConfirm() {
				//是密码支付时
				// 未设置密码
				if (this.userinfo.payPassword == '0') {
					return this.Jump('/pages/mine/setAccount/security/editorPay/editorPay?type=1');
				}
				//处理当指纹验证失败 重新验证时再次进入指纹认证
				//密码框处于打开状态则不再验证指纹
				let pwd = this.pwd;
				// if (this.isFinger && !this.isPwdShow) {
				// 	const success = await fingerprint();
				// 	if (success) {
				// 		const { code, data } = await getFingerToken();
				// 		pwd = data;
				// 	} else {
				// 		this.Toast('验证失败')
				// 		this.isPwdShow = true;
				// 		return
				// 	}
				// } else {

				// }
				if (!pwd) {
					this.Toast('请输入密码');
					return
				} else {
					// pwd = md5(pwd)
				}
				return this.$emit('handleConfirm', this.pwd);
			},
			handleCancel() {
				this.$emit('handleCancel');
			},
			handleMask() {
				this.$emit('update:isShow', false);
			}
		}
	};
</script>

<style lang="scss">
	.pay-box {
		width: 660rpx;
		border-radius: 28rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 12;
		background: #ffffff;
		color: #111;

		.title {
			padding: 20rpx 0;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1rpx solid #eeeeee;
		}

		.pay-Box {
			padding: 37rpx 36rpx;
		}

		.footer {
			display: flex;
			border-top: 1rpx solid #eeeeee;

			&>view {
				flex: 1;
				padding: 26rpx 0;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}

			view:nth-of-type(2) {
				color: #fa2b47;
			}

			&>view+view {
				border-left: 1rpx solid #eeeeee;
			}
		}
	}

	.pay-bottom-box {
		padding: 40rpx 30rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: #ffffff;
		color: #111;

		.pay-Box {
			padding: 37rpx 0;
		}

		.cell {
			padding-bottom: 0;
		}

		.cancel {
			background: #eeecec !important;
			color: #999999;
		}

		.confirm {
			background: linear-gradient(270deg, #fa2b47 0%, #ff6619 100%);
		}

		.footer {
			display: flex;
			overflow: hidden;
			box-sizing: border-box;

			&>view {
				flex: 1;
				border-radius: 34px;
				padding: 20rpx 0;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}

			view:nth-of-type(2) {
				color: #fff;
			}

			&>view+view {
				margin-left: 30rpx;
			}
		}
	}

	.title {
		position: relative;
		margin-bottom: 24rpx;

		.mIcon {
			position: absolute;
			z-index: 9;
			left: 0rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		view {
			position: relative;
			z-index: 1;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.body {}

	.pay-Box {
		.form-Item {
			background: #f6f6f6;
			// border: 1px solid #4D536B;
			border-radius: 15rpx;
			padding: 20rpx 28rpx;
			box-sizing: border-box;

			input {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
			}
		}

		.pay-error {
			padding: 20rpx 28rpx;
			text-align: center;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff1008;
			}

			.m-button {
				margin-left: 15rpx;
				padding: 5rpx 20rpx;
			}
		}
	}

	.pay-list-box {
		max-height: 460rpx;
		overflow-y: scroll;

		.pay-list {
			width: 100%;
			padding-top: 30rpx;
		}
	}
</style>